<template>
	<view>
		<!-- 注意子组件传入的值需要@tabTap监听事件 -->
		<view class="white-bj">
			<swiper-tab-hear :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap" scrollWidth="width:20%"></swiper-tab-hear>
		</view>
		<view class="uni-tab-bar" :style="{height:swiperHeight+'px'}" >
			<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)">
				<template v-if="list.length>0">
					<!-- 列表渲染 -->
					<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing" v-for="(item,index) in list" :key="index">
						<view class="a-center j-sp">
							<view class="a-center">
								<view class="logo overflow-hidden border-r-5"><image :src="item.business_data.logo" mode="widthFix" lazy-load></image></view>
								<view class="font-28 mar-left10">{{item.business_data.name}}</view>
							</view>
							<view class="font-26">
								<view class="activeColor" v-if="item.m_fuwu.status==2">待预约</view>
								<view class="main-zt" v-else-if="item.m_fuwu.status==3">服务中</view>
							</view>
						</view>
						<view class="d-flex mar-top40">
							<view class="left border-r-10 overflow-hidden"><image :src="item.m_fuwu.pic" mode="widthFix" lazy-load></image></view>
							<view class="right mar-left30">
								<view class="font-26 font-w-b text-overflow">{{item.m_fuwu.name}}</view>
								<view class="font-24 black60-zt mar-top20">规格：{{item.m_fuwu.ggname}}</view>
								<view class="a-center j-sp mar-top20">
									<view class="a-end">
										<view class="main-zt font-24 font-w-b">¥<text class="font-34">{{item.m_fuwu.product_price}}</text></view>
									</view>
								</view>
							</view>
						</view>
						<view class="mar-top20 border-t-1-91 pad-t-20">
							<view class="font-w-b font-26">项目明细：</view>
							<view class="fu-list">
								<view v-for="(item1,index1) in item.order_goods" :key="index1" class="a-center j-sp" v-if="item.order_goods.length>0">
									<view class="font-24 line-h35 black60-zt a-center">
										<view>{{item1.name}}</view>
										<view class="mar-left20">(次数：{{item1.y_num}}/{{item1.num}})</view>
									</view>
									<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 font-22 mar-top20" v-if="item1.status==1" @tap="yuyue(item1)">预约</view>
									<view class="main-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 font-22 mar-top20" v-else-if="item1.status==2" @tap="yuyue1(item1)">服务中</view>
									<view class="black93-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 black20-zt font-22 mar-right15 mar-top20" v-else>已完成</view>
								</view>
							</view>
						</view>
					</view>
						<!-- 上拉加载 -->
						<load-more :loadText="loadText"></load-more>
				</template>
				<template v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-26 black60-zt text-center">没有更多记录...</view>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import swiperTabHear from "@/pagesC/pages_com/swiper-tab-hear.vue";
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			swiperTabHear,
			loadMore
		},
		data() {
			return {
				tabIndex:0,
				swiperHeight:500,
				tabBars: [
					{name: '全部订单', id: -1,type:'order'},
					{name: '待付款',id: 0,type:'order'}, 
					{name: '已支付',id: 1,type:'order'}, 
					{name: '待预约', id: 2,type:'fuwu'},
					{name: '服务清单', id:3,type:'fuwuOrder'},
				],
				query:{mid:undefined,page:1,limit:10},
				count:0,
				loadText:"上拉加载更多",
				list:[]
			}
		},
		onLoad(e) {
			this.tabIndex=parseFloat(e.index)
			this.query.mid=parseInt(this.$user.state.userId)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(200)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
		},
		onShow() {
			this.query.page=1
			this.list=[]
			this.getOrder()
		},
		filters:{
			timeStanp(dataTime){
				if (dataTime === undefined) { return }
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			}
		},
		methods: {
			//预约
			yuyue(Obj){
				uni.navigateTo({
					url:'/pagesC/orderfu/reservation?id='+Obj.id
				})
			},
			//取消订单
			yuyue1(Obj){
				uni.showModal({
					title:'提示',
					content:'您是要继续下单服务还是查询服务信息，如果查看服务将转跳至服务清单哟～',
					cancelText:"查看服务",
					confirmText:"继续下单",
					success: (res) => {
						if (res.confirm) {
							if(Obj.num>Obj.y_num){
								this.yuyue(Obj)
							}else{
								uni.showToast({
									icon:"none",
									title:"该服务次数已用完！"
								})
							}
							
						}else{
							uni.redirectTo({
								url:'/pagesC/orderfu/inventory?index=4'
							})
						}
					}
				})
			},
			//获取订单列表
			async getOrder(){
				await this.$api.GetFuWuTaoList(this.query).then(res=>{
					
					this.list=[...this.list,...res.data]
					//计算是否还有
					let total_page=res.count/this.query.limit
					if(Number.isInteger(total_page)==true){
						total_page=total_page
					}else{
						total_page=Math.ceil(total_page)
					}
					if(this.query.page<total_page){
						this.loadText="上拉加载更多"
					}else{
						this.loadText="没有更多记录..."
					}
				})
			},
			//上拉加载事件
			async loadMore(index){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
				this.getOrder()
			},
			//tabbar点击切换事件
			tabTap(index,type){
				if(type=='order'){
					this.tabIndex=index;
					const type=index-1
					uni.redirectTo({
						url:'/pagesC/orderfu/orderfu?index='+type
					})
				}else if(type=="fuwuOrder"){
					uni.redirectTo({
						url:'/pagesC/orderfu/inventory?index=4'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.shop{
		border-radius: 25rpx;
		.logo{
			width: 45rpx;
			height: 45rpx;
		}
		.left{
			width: 175rpx;
			height: 175rpx;
		}
		.right{
			width: 480rpx;
		}
	}
	.nothing{
		position: absolute;
		top: 30%;
		bottom: 0;
		left: 0;
		right: 0;
		image{
			width: 40%;
			margin: auto;
		}
	}
</style>
